<template>
    <div class="bread_wrapper w-100">
        <!-- <span>当前位置：</span>
        <el-breadcrumb separator-class="el-icon-right" style="color: red;">
            <el-breadcrumb-item :class="activePath.length -1 === index ? 'active' : ''" v-for="(item, index) in activePath" :key="item.key">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb> -->
        <div class="scroll_icon d-flex al-center" @click="scrollClickHandle('left')" style="padding-left: 16px;">
            <i class="el-icon-d-arrow-left " ></i>
        </div>
        <div class="d-flex flex-1 scroll_wrapper h-100 al-center" ref="scrollWrapper">
            <div
                :ref="item.fullPath"
                :key="item.fullPath"
                v-for="(item, index) in navTabList"
                class="navTabItem d-flex al-center"
                :class="{
                    actived: isOnShowFullPath(item.fullPath),
                    abc: index+1 !== navTabList.length && !isOnShowFullPath(item.fullPath),
                    needInterval: showInterVal( index)
                }"
                :style="{
                    minWidth: (item.tabTitle || item.meta.title) === '首页' ? '100px' : '142px'
                }"
                @click="pushRoute(item)"
            >
                <span class="dot"></span>
                <span
                    class="text flex-1 nav_title"
                    :title="item.tabTitle || item.meta.title"
                    >{{ item.tabTitle || item.meta.title }}</span
                >
                <i
                    v-if="item.name !== 'main'"
                    class="el-icon-close pl-4 closeButton"
                    @click.stop="removeRoute(item.fullPath)"
                ></i>
            </div>
        </div>
        <div class="scroll_icon d-flex al-center" @click="scrollClickHandle('right')" style="border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;">
            <i class="el-icon-d-arrow-right "></i>
        </div>

        <div class="close_all h-100 d-flex al-center">
            <el-dropdown @command="command">
                <i class="el-icon-circle-close"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="closeAll">全部关闭</el-dropdown-item>
                    <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
export default {
    name: "topBread",
    inject: ["removeRoute", "pushRoute", "removeAll", "removeOther"],
    data() {
        return {};
    },
    computed: {
        activePath() {
            return this.$store.state.account.activePath || [];
        },
        navTabList() {
            return this.$store.state.global.navTabList;
        },
        activeFullPath() {
            return this.$route.fullPath;
        },
        showInterVal() {
            return (index) => {

                let isActive = this.isOnShowFullPath(this.navTabList[index]?.fullPath);
                let nextIsActive = this.isOnShowFullPath(this.navTabList[index + 1]?.fullPath)

                if( isActive || nextIsActive) {
                    return false
                }
                return true;
            }
        }
    },
    watch: {
        activeFullPath(n) {
            if(n) {
                this.$nextTick(() => {
                    try {
                        let ref = this.$refs[n][0];
                        ref.scrollIntoView()
                    } catch (error) {
                        console.error(error, "activeFullPath")
                    }
                })
            }
        }
    },
    methods: {
        isOnShowFullPath(fullPath) {
            return this.$route.fullPath === fullPath;
        },
        scrollClickHandle(type) {
            let {scrollWrapper} = this.$refs;
            let x = type === 'left' ? -150 : 150;
            scrollWrapper && scrollWrapper.scrollBy(x, 0);
        },
        // 类型
        command(command) {
            console.log(command, "commandcommand")
            if(command === 'closeAll') {
                this.removeAll();
            }else if(command === 'closeOther') {
                this.removeOther(this.$route.fullPath);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@assets/variables.scss";
$color_text: #333;
$active_text_color: #222;
$active_tab_back: #fff;
$close_icon_color: #333;
$color_border: #dfdfdf;

.bread_wrapper {
    display: flex;
    align-items: center;
    background: #F6F7FB;
    box-shadow: inset 0 1px 2px #e6e7eb , inset 0 -1px 2px #e6e7eb;
    padding: 2px 0;
    height: 44px;
    justify-content: space-between;
    ::v-deep {
        .el-breadcrumb {
            .el-breadcrumb__inner {
                color: $color_text;
            }
            .active {
                .el-breadcrumb__inner {
                    color: $--color-primary;
                }
            }
        }
    }

    .close_all {
        color: $--color-primary;
        font-size: 22px;
        cursor: pointer;
        // background: #fff;
        padding: 0 10px;
        line-height: 36px;
    }
}
.navTabItem {
    padding: 0 8px;
    height: 30px;
    // line-height: 36px;
    display: inline-block;
    cursor: pointer;
    color: #666;
    white-space: nowrap;
    display: flex;
    align-items: center;
    position: relative;
    .nav_title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dot {
        display: block;
        content: " ";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #AFAFAF;;
        margin: 0 6px 0 0;
    }
    &:hover {
        // color: #eee;
        color: $--color-primary;
    }

    &.actived {
        background-color: $active_tab_back;
        color: $active_text_color;
        font-weight: bold;
        border-width: 0;
        border-radius: 6px;
        .dot {
            background: #555;
        }
        .closeButton {
            color: $active_text_color;

            &hover {
                color: #fff;
            }
        }
    }

    .closeButton {
        color: $close_icon_color;
        // &:hover {
        //     color: #eee;
        // }
    }
}
.needInterval {
    // border-right: 2px solid #adadad;
    &::after {
        display: block;
        content: " ";
        width: 1px;
        height: 18px;
        background: #adadad;
        // margin-left: 8px;
        position: absolute;
        right: 1px;
    }
}
.scroll_wrapper {
    overflow: auto;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}
.scroll_icon {
    height: 100%;
    cursor: pointer;
    padding: 0 10px;
    // background: #fff;
    // border: 1px solid $color_border;

    &:hover {
        color: $--color-primary;
        background: #e3e3e3;
    }
}
</style>
